<template>
  <div class="home">
    <HomeNav />
    <HomeHeader />
    <div class="content article">
      <div class="container">
        <h2>文章</h2>
        <Articles v-bind:blogs="articles" />
        <div class="bottom_btn">
          <router-link :to="{name:'article',query:{type:0}}" class="btn btn-primary btn-lg">查看更多</router-link>
        </div>
      </div>
    </div>
    <div class="content project">
      <div class="container">
        <h2>项目</h2>
        <Projects v-bind:blogs="projects" />
        <div class="bottom_btn">
          <router-link :to="{name:'project',query:{type:1}}" class="btn btn-primary btn-lg">查看更多</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeHeader from "../components/Home_Header";
import HomeNav from "../components/Home_Nav";
import Articles from "../components/Articles";
import Projects from "../components/Projects";
import axios from "axios";

export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeNav,
    Articles,
    Projects,
  },
  data() {
    return {
      articles: [],
      projects: [],
    };
  },
  created() {
    axios
      .get("/api/Blog?type=0&pagesize=8&Fields=BlogId,Cover,Title")
      .then((res) => (this.articles = res.data))
      .catch((err) => window.console.log(err));
    axios
      .get("/api/Blog?type=1&pagesize=6&Fields=BlogId,Cover,Title")
      .then((res) => (this.projects = res.data))
      .catch((err) => window.console.log(err));
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  min-height: 70vh;

  position: relative;
}
.content h2 {
  margin: 0;
  padding-top: 50px;
  text-align: center;
  margin-bottom: 50px;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}

.article {
  background-color: #f2f2f2;
}
.project {
  background-color: #d9d5c5;
}
.bottom_btn {
  text-align: center;
  padding: 70px;
}
</style>
